<template>
    <view>
        <view class="curriculum_type_box u-flex">
            <view class="curriculum_item u-flex u-col-center"
                  v-for="(item,index) in curriculumTypeList"
                  :key="index"
                  @click="changeCurriculumCategory1(item,index)"
                  :style="{'backgroundImage': `url(${selecIndex == index ? bgImgList[index].selectUrl : bgImgList[index].url})`}">
                <span class="curriculum_item_text">{{ item.name }}</span>
            </view>
        </view>
        <view class="sticky_box">
            <u-sticky offset-top="0"
                      @fixed="isStickyFixed = true"
                      @unfixed="isStickyFixed = false">
                <view>
                    <!-- 分类导航 -->
                    <view class="tabs">
                        <u-tabs :list="curriculumTypeList[selecIndex].children"
                                name="name"
                                paddingRight="50rpx"
                                :current="currentTabIndex"
                                @change="tabChange"
                                height="80"
                                font-size="32"
                                bar-width="64"
                                gutter="44"
                                :bg-color="isStickyFixed ? '#fff' : '#F0F2F5'"
                                inactive-color="#666666"
                                active-color="#63B9F2"></u-tabs>
                        <image class="tabs_img"
                               :src="isStickyFixed ? '/static/images/sy_icon_more_white@2x.png' : '/static/images/sy_icon_more_hui@2x.png'"
                               @click="showCurriculum = true"
                               mode="" />
                    </view>
                    <view class="week_box u-flex u-row-between"
                          :style="{'background-color': isStickyFixed ? '#fff' : '#F0F2F5'}">
                        <view class="week_item"
                              :class="{'sticky':isStickyFixed,'active': weekSelectIndex == index,}"
                              v-for="(item,index) in weekList"
                              :key="index"
                              @click="weekSelectIndex = index;queryData.week = item.name ">{{ item.name }}</view>
                    </view>
                </view>
            </u-sticky>
        </view>

        <view class="curriculum_box padding_box">
            <view v-if="curriculumItemList.length > 0">
                <view class="curriculum_item u-flex"
                      v-for="(item,index) in curriculumItemList"
                      :key="index">
                    <!-- @click="curriculumDetails(item)" -->
                    <image class="curriculum_img"
                           :src="item.productResp && item.productResp.pic"
                           mode="" />
                    <view class="right_box u-flex u-flex-col u-row-between">
                        <view class="curriculum_title">{{ item.productResp && item.productResp.name }}</view>
                        <view class="details_info_text"
                              v-if="item.weekStr.length > 0">一周{{ item.weekStr.length == 1 ? '一':'两' }}节课，{{ item.weekStr && item.weekStr.join(',') }} 上课</view>
                        <view class="right_bottom_box u-flex u-row-between">
                            <view class="u-flex">
                                <view class="curriculum_text">剩余名额：</view>
                                <view class="curriculum_surplus">{{ item.residueStock }}</view>
                            </view>
                            <u-button @click="signUpClick(item)"
                                      type="primary"
                                      :disabled="canSignUp"
                                      :custom-style="customStyle"
                                      :ripple="true"
                                      shape="circle"> 报名 </u-button>
                        </view>
                    </view>
                </view>
                <!-- <view class="load_box"
                      v-if="curriculumItemList.length >= 5">
                    <u-loadmore :status="loadingStatus" />
                </view> -->
            </view>
            <view v-else>
                <meu-empty top="65vh"
                           tipText="暂无课程信息" />
            </view>
        </view>
        <view class="shopping_cart_box"
              @click="$goto('push', '/pages/shoppingCart/shoppingCart')"
              :class="{ 'show': onScroll }">
            <image class="shopping_cart_img"
                   src="@/static/images/shoppingCart.png"
                   mode="" />
        </view>
        <u-popup v-model="showCurriculum"
                 mode="top"
                 border-radius="32"
                 length="40%">
            <div class="part-container">
                <div class="title">课程类型</div>
                <div class="time_box">
                    <div class="select-time-item"
                         v-for="(item, index) in curriculumTypeList[selecIndex].children"
                         :key="index"
                         :class="{'selected': index == currentTabIndex,}"
                         @click="tabChange(index)">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <view class="footer_box u-flex u-row-between">
                <u-button @click="showCurriculum = false"
                          type="default"
                          :hair-line="false"
                          :ripple="true"
                          :custom-style="{backgroundColor:'#F5F5F5',color:'#333',fontWeight: 'bold',fontSize:'32rpx',borderRadius: '16rpx',}"
                          shape="circle"> 取消 </u-button>
                <u-button @click="showCurriculum = false;"
                          type="primary"
                          :hair-line="false"
                          :ripple="true"
                          :custom-style="{backgroundColor:'#63B9F2',marginLeft:'30rpx',color:'#fff',fontWeight: 'bold',fontSize:'32rpx',borderRadius: '16rpx',}"
                          shape="circle"> 确认 </u-button>
            </view>

        </u-popup>
        <u-tabbar :show="loginType == 'parent'"
                  active-color="#63B9F2"
                  :list="parentList"></u-tabbar>
        <u-tabbar :show="loginType == 'teacher'"
                  active-color="#63B9F2"
                  :list="teacherList"></u-tabbar>
    </view>
</template>

<script>
import myEmpty from '@/components/meu-empty/meu-empty.vue'
import treesVue from '../../uview-ui/components/u-parse/libs/trees.vue'
export default {
    components: {
        myEmpty
    },
    data() {
        return {
            loginType: '',
            showCurriculum: false,
            parentList: [
                {
                    pagePath: "/pages/index/index",
                    iconPath: "/static/images/nav_icon_sy_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_sy_sel@2x.png",
                    text: "首页"
                },
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            teacherList: [
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            selecIndex: 0,
            currentTabIndex: 0,
            loadingStatus: 'loadmore',
            queryData: {
                week: "周一",
                childrenClass: '',
                categoryId: '',
                pageSize: 100,
                pageNum: 1,
            },
            bgImgList: [
                { url: require('@/static/images/sy_pic_xqb_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_xqb_sel@2x.png') },
                { url: require('@/static/images/sy_pic_wutuo_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_wutuo_sel@2x.png') },
                { url: require('@/static/images/sy_pic_night_nor@2x.png'), selectUrl: require('@/static/images/sy_pic_night_sel@2x.png') },
            ],
            curriculumTypeList: [],
            weekSelectIndex: 0,
            weekList: [
                { id: 1, name: '周一' }, { id: 1, name: '周二' }, { id: 1, name: '周三' }, { id: 1, name: '周四' }, { id: 1, name: '周五' },
            ],
            curriculumList: [],
            curriculumItemList: [],
            isStickyFixed: false,
            customStyle: {
                width: '128rpx',
                height: '64rpx',
                background: ' #63B9F2',
                borderRadius: '16rpx',
            },
            userInfo: {},
            studentCurriculumList: [],
            onScroll: true,
        }
    },
    onShareAppMessage: function (res) {
    },
    onShow() {
        this.loginType = uni.getStorageSync('loginType')
        if (this.loginType == 'parent') {
            this.currentChildren()
        }

    },
    onPageScroll(e) {
        this.onScroll = false
        setTimeout(() => {
            this.onScroll = true
        }, 1000);
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
        let _this = this
        setTimeout(() => {
            _this.currentChildren()
        }, 500);
    },
    onLoad() {
        this.loginType = uni.getStorageSync('loginType')
        this.getChildrenList()
        if (this.loginType == 'parent') {
            this.getUserInfo()
        }
        // 
        this.getCategoryTree()
    },
    mounted() {
    },
    computed: {
        canSignUp() {
            let index = this.studentCurriculumList.findIndex(ele => ele.week == this.queryData.week)
            console.log('>>>>>>>>>>>>>>>>>>>>>>>index', index)
            if (index != -1) {
                return true
            } else {
                return false
            }
        },
    },
    watch: {
        loginType(newV) {
            if (newV == 'teacher') {
                uni.switchTab({
                    url: '/pages/timeimagesles/timeimagesles'
                });
            }
        },
        'queryData.week': {
            handler(newV) {
                this.getListPageByClass()
            }
        },
        'queryData.categoryId': {
            handler(newV) {
                this.getListPageByClass()
            }
        },
    },
    methods: {
        async getChildrenList() {
            let _this = this
            let res = await this.getChildren()
            // if (res.code == 0 && res.data.length == 0) {
            //     this.$interactive.toast('还未绑定孩子，请去绑定孩子')
            //     setTimeout(() => {
            //         _this.$goto('push', '/pages/bindChildren/bindChildren?login=true')
            //     }, 1000);
            // }
        },
        // 获取已报名课程列表
        getStudentClassPage() {
            this.$api.studentClassPage({}, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.studentCurriculumList = res.data
                }
            });
        },
        // 获取个人信息
        getUserInfo() {
            var _this = this;
            this.$api.getUserInfo({}, result => {
                _this.userInfo = result.data;
                uni.setStorageSync('userInfo', result.data)
            });
        },
        changeCurriculumCategory1(item, index) {
            this.selecIndex = index;
            this.queryData.categoryId = item.id
            this.currentTabIndex = 0
        },
        getCategoryTree() {
            this.$api.getCategoryTree({}, res => {
                res.data.forEach(ele => {
                    ele.children.unshift(
                        { id: '', name: "全部" }
                    )
                });
                // this.queryData.categoryId = res.data[0].id
                this.curriculumTypeList = res.data
            });
        },
        getListPageByClass() {
            this.$api.getListPageByClass(this.queryData, res => {
                if (res.code == 0) {
                    this.curriculumItemList = res.data.list
                }
            });
        },
        // 获取孩子列表
        getChildren() {
            return new Promise((resolve, reject) => {
                let _this = this
                this.$api.getChildren({}, res => {
                    resolve(res)
                });
            })
        },
        // 获取当前使用孩子
        currentChildren() {
            this.$api.currentChildren({}, res => {
                if (res.code == 0 && res.data) {
                    this.queryData.childrenClass = res.data.childrenClass
                    uni.setStorageSync('currentChildren', res.data)
                    this.getStudentClassPage()
                    this.getListPageByClass()
                }
            });
        },
        // 课程tabs点击
        tabChange(e) {
            this.currentTabIndex = e;
            if (e == 0) {
                this.queryData.categoryId = this.curriculumTypeList[this.selecIndex].id
            } else {
                this.queryData.categoryId = this.curriculumTypeList[this.selecIndex].children[e].id
            }
            console.log('currentCurriculumId', this.queryData.categoryId)
            // this.merchantList(this.queryData.categoryId)
        },
        curriculumDetails(item) {
            this.$goto('push', '/pages/curriculumDetails/curriculumDetails')
        },
        signUpClick(item) {
            console.log('>>>>>>>>>>>>>>item', item)
            // this.$goto('push', '/pages/curriculumDetails/curriculumDetails?detailData=' + encodeURIComponent(JSON.stringify(item)))
            this.$goto('push', '/pages/curriculumDetails/curriculumDetails?itemId=' + item.id)
        },
    }
}
</script>
<style >
page {
    color: #333;
}
</style>

<style lang="scss" scoped>
.curriculum_type_box {
    margin: 30rpx;
    .curriculum_item {
        flex: 1;
        color: #fff;
        border-radius: 30rpx;
        background-size: cover;
        background-position: center;
        height: 144rpx;
        .curriculum_item_text {
            font-size: 36rpx;
            margin-left: 24rpx;
        }
    }
    .curriculum_item + .curriculum_item {
        margin-left: 30rpx;
    }
}
.tabs {
    position: relative;
    .tabs_img {
        position: absolute;
        right: 0;
        top: 16rpx;
        width: 92rpx;
        height: 48rpx;
    }
}

.week_box {
    padding: 30rpx;
    background: #f0f2f5;
    .week_item {
        flex: 1;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        border: 1rpx solid #fff;
        background: #ffffff;
        border-radius: 16rpx;
        transition: all 0.3s;
        &.sticky {
            background-color: #f0f2f5;
        }
        &.active {
            background: #f0f9ff;
            color: #63b9f2;
            border: 1rpx solid #63b9f2;
        }
    }
    .week_item + .week_item {
        margin-left: 16rpx;
    }
}
.curriculum_box {
    margin: 30rpx 0;
    .curriculum_item {
        padding: 16rpx;
        background: #ffffff;
        border-radius: 32rpx;
        .curriculum_img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 16px;
            margin-right: 32rpx;
        }
        .right_box {
            flex: 1;
            align-items: flex-start;
            height: 200rpx;
            .right_bottom_box {
                width: 100%;
            }
            .details_info_text {
                color: #666;
            }
            .curriculum_title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
            .curriculum_text {
                font-size: 24rpx;
                color: #333;
            }
            .curriculum_surplus {
                font-size: 24rpx;
                color: #63b9f2;
            }
        }
    }
    .curriculum_item + .curriculum_item {
        margin-top: 30rpx;
    }
}
.padding_box {
    padding: 0 30rpx;
}
.sticky_box {
    background-color: #fff;
}

.title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    text-align: justify;
    padding-right: 30rpx;
    position: relative;
    height: 60rpx;
    line-height: 60rpx;
}
.time-KP-box {
    padding-bottom: 30rpx;
}
.part-container {
    padding: 22rpx 0rpx 0rpx 28rpx;
}
.time_box {
    flex-wrap: wrap;
    padding-left: 15rpx;
    box-sizing: border-box;
    display: flex;
}
.select-time-item {
    min-width: 115rpx;
    max-width: 200rpx;
    height: 60rpx;
    display: inline-block;
    padding: 0 30rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 60rpx;
    margin: 12rpx 35rpx 10rpx 0rpx;
    color: #333;
    border-radius: 30rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.2s;
    flex: 1 1 auto;
    border: 1rpx solid #fff;
    background: #f5f5f5;
}
.select-time-item.selected {
    background: #f0f9ff;
    color: #63b9f2;
    border: 1rpx solid #63b9f2;
}

.knowledgePoints-box {
    padding: 20rpx 30rpx 22rpx 28rpx;
    .knowledgePoints-text {
        font-size: 30rpx;
        color: #000;
        text-align: center;
        margin: 0 20rpx 0 0;
    }
    .knowledgePoints-selectItem-box {
        position: relative;
        left: 90rpx;
        top: -35rpx;
        padding: 0 30rpx;
    }
    .knowledgePoints-selectItem {
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 15rpx;
        text-align: center;
        font-size: 28rpx;
        margin-bottom: 30rpx;
        margin-right: 30rpx;
        color: #828282;
        border: 1rpx solid;
        min-width: 100rpx;
        display: inline-block;
        padding: 0 15rpx;
    }
    .knowledgePoints-selectItem.selected {
        background-color: #63b9f2;
        color: #fff;
    }
    .knowledgePoints-selectItem.allKp {
        margin-right: 100%;
    }
}
.footer_box {
    u-button {
        flex: 1;
        /deep/.u-btn--bold-border {
            border: 0;
        }
    }
}
.shopping_cart_box {
    position: fixed;
    right: 30rpx;
    bottom: 200rpx;
    transform: translateX(150%);
    transition: all 0.3s;
    z-index: 999;
    &.show {
        transform: translateX(0);
    }
    .shopping_cart_img {
        width: 132rpx;
        height: 126rpx;
    }
}
</style>
